<template>
	<view>
		<u-navbar title="搜索"></u-navbar>
		<view class="search-bar bg-white" :style="{top:`${navBar}px`}">
			<u-search v-model="key" placeholder="搜索好友或群聊名称" :show-action="false" :focus="true"></u-search>
		</view>
		<view v-if="key" class="nav bg-white" :style="{top:`calc(90rpx + ${navBar}px)`}">
			<view class="tabs">
				<view class="item" :class="{cur:cur==index}" v-for="(item,index) in tabs" :key="index" @tap="changeTab(index)">{{item.name}}</view>
			</view>
		</view>
		<view style="height: 170rpx;"></view>
		<!--  -->
		<view v-if="key"> 
			<view v-show="cur==0">
				<view class="u-m-t-20 bg-white" v-if="friendList.length">
					<view class="u-flex u-row-between u-p-x-30 u-p-y-20 u-border-bottom">
						<text class="u-font-28 text-gray">好友</text>
						<view class="text-gray" v-if="friendList.length>3" @tap="changeTab(1)">
							<text>更多</text>
							<u-icon name="arrow-right" size="28"></u-icon>
						</view>
					</view>
					<navigator :url="`/pages/user/info?id=${user.userId}`" hover-class="none" class="u-flex u-p-x-30 u-p-y-20 u-border-bottom"
						v-for="(user,index) in friendList.slice(0,3)" 
						:key="index">
						<u-avatar :src="user.avatarUrl" mode="square"></u-avatar>
						<text class="u-m-l-20 u-font-34">
							<light-text :word="user.remarks?`${user.remarks}(${user.userName})`:user.userName" :char="key"></light-text>
						</text>
					</navigator>
				</view>
				
				<view class="u-m-t-20 bg-white" v-if="groupList.length">
					<view class="u-flex u-row-between u-p-x-30 u-p-y-20 u-border-bottom">
						<text class="u-font-28 text-gray">群聊</text>
						<view class="text-gray" v-if="groupList.length>3" @tap="changeTab(2)">
							<text>更多</text>
							<u-icon name="arrow-right" size="28"></u-icon>
						</view>
					</view>
					<view class="u-flex u-p-x-30 u-p-y-20 u-border-bottom"
						v-for="(item,index) in groupList.slice(0,3)" 
						:key="index"
						@tap="multiChat(item)"
					>
						<u-avatar :src="item.avatar" mode="square"></u-avatar>
						<view class="u-m-l-20">
							<view>
								<text class="u-font-34"><light-text :word="item.name" :char="key"></light-text>
							</text>
							</view>
							<view class="u-flex">
								<text v-if="userInfo.userId == item.userId" class="cu-tag sm bg-orange radius u-m-r-10">群主</text>
								<text class="u-font-24 text-gray">{{item.userCount}}人</text>
							</view>
						</view>
					</view>
				</view>
				<view class="u-text-center u-m-t-50" v-if="!friendList.length&&!groupList.length">
					<text class="text-gray">暂无相关数据</text>
				</view>
			</view>
			<view class="u-m-t-20" v-show="cur==1">
				<navigator :url="`/pages/user/info?id=${user.userId}`" hover-class="none" class="u-flex u-p-x-30 u-p-y-20 u-border-bottom bg-white"
					v-for="(user,index) in friendList" 
					:key="user.userId">
					<u-avatar :src="user.avatarUrl" mode="square"></u-avatar>
					<text class="u-m-l-20 u-font-34">
						<light-text :word="user.remarks?`${user.remarks}(${user.userName})`:user.userName" :char="key"></light-text>
					</text>
				</navigator>
				<view class="u-text-center u-m-t-50" v-if="!friendList.length">
					<text class="text-gray">暂无相关数据</text>
				</view>
			</view>
			<view class="u-m-t-20" v-show="cur==2">
				<view class="bg-white u-flex u-p-x-30 u-p-y-20 u-border-bottom"
					v-for="(item,index) in groupList" 
					:key="index"
					@tap="multiChat(item)"
				>
					<u-avatar :src="item.avatar" mode="square"></u-avatar>
					<view class="u-m-l-20">
						<view>
							<text class="u-font-34">
								<light-text :word="item.name" :char="key"></light-text>
							</text>
						</view>
						<view class="u-flex">
							<text v-if="userInfo.userId == item.userId" class="cu-tag sm bg-orange radius u-m-r-10">群主</text>
							<text class="u-font-24 text-gray">{{item.userCount}}人</text>
						</view>
					</view>
				</view>
				<view class="u-text-center u-m-t-50" v-if="!groupList.length">
					<text class="text-gray">暂无相关数据</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Vue from "vue"
	import {jumpTo,delay,toast} from "@/utils/util.js"
	import {mapGetters,mapActions} from "vuex"
	import lightText from "@/components/lightText/lightText.vue"
	export default {
		components:{
			lightText
		},
		data() {
			return {
				key:'',
				tabs:[
					{name:'全部'},
					{name:'好友'},
					{name:'群组'}
				],
				cur:0
			};
		},
		computed:{
			...mapGetters('addr',['friends','groups']),
			...mapGetters('user',['userInfo']),
			friendList(){
				return this.friends.filter(({userName='',remarks='',userNum=''})=>userName.includes(this.key)||remarks.includes(this.key)||userNum.includes(this.key))
			},
			groupList(){
				return this.groups.filter(({name})=>name.includes(this.key))
			}
		},
		methods:{
			...mapActions('chat', ['setConversation']),
			changeTab(index){
				this.cur = index
			},
			async multiChat(group){
				this.setConversation({
					id:group.id,
					type:1,
					avatar:group.avatar,
					name:group.name
				})
				jumpTo(`/pages/room/multi?id=${group.id}`)
			},
		}
	}
</script>

<style lang="scss" scoped>
	.search-bar{
		position: fixed;
		left:0;
		right: 0;
		height: 90rpx;
		display: flex;
		align-items: center;
		padding: 0 30rpx;
	}
	.nav{
		position: fixed;
		left:0;
		right: 0;
		height: 80rpx;
		.tabs{
			height: 100%;
			display: flex;
			justify-content: space-around;
			.item{
				padding: 0 30rpx;
				font-size: 32rpx;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				&.cur{
					position: relative;
					font-weight: bold;
					color: #2979ff;
					&::after{
						content: '';
						width: 60rpx;
						height: 6rpx;
						border-radius: 10rpx;
						background-color: #2979ff;
						position: absolute;
						bottom: 8rpx;
						left: 50%;
						transform: translateX(-50%);
					}
				}
			}
		}
	}
</style>
